
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>零宽字符加密/解密</title>
    
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link  rel="stylesheet"  href="http://top2.zhengfy.top/top/pade/workspace/mdui/css/mdui.css">
    <script src="http://top2.zhengfy.top/top/pade/workspace/mdui/js/mdui.js"></script>
</head>
<body>
        <h1 class="mdui-text-center">零宽字符加密/解密</h1>
    <div class="mdui-container mdui-m-t-3">
    <textarea  class="mdui-textfield-input mdui-col-xs-6" rows="20" id="en" placeholder="加密前"></textarea>
    <textarea  class="mdui-textfield-input mdui-col-xs-5 mdui-m-l-1" rows="20"  id="de" placeholder="加密后"></textarea>
    <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-col-xs-6" type="加密" onclick="en()">加密</button>
    <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-col-xs-5 mdui-m-l-1" type="解密" onclick="de()">解密</button>
    <textarea  class="mdui-textfield-input mdui-col-xs-12 mdui-m-t-2" rows="2"  id="res" placeholder=""></textarea>
    </div>
</body>

<script>
    function en(){
        const text =  $("#en").val();
        const textArray = Array.from(text);
        const binarify = textArray.map(c => c.codePointAt(0).toString(2));
        const encoded = binarify.map(c => Array.from(c).map(b => b === '1' ? '‍' : '‌').join('')).join('​');
        var txt="'"+encoded+"'";
        $("#de").val(txt);
        var fo=txt+".split('​').map(c => Array.from(c).map(z => z === '‍' ? '1' : '0').join('')).map(b => String.fromCodePoint(parseInt(b, 2))).join('')";

        var f="(new Function(\"return \"+(new Function(\"return \"+"+fo+"))()+\"\"))();";
        $("#res").html(f);
    }

    function de(){
        const text =  $("#de").val();
        $("#en").val(eval(text+".split('​').map(c => Array.from(c).map(z => z === '‍' ? '1' : '0').join('')).map(b => String.fromCodePoint(parseInt(b, 2))).join('')"));
    }

</script>
</html>


<!--
<script>
    // 为了代码的简洁与易读性，以下代码会忽略性能方面考量




    const text = ':grinning:';

    // Array.from 能让我们正确读取宽度为2的Unicode字符，例：:grinning:
    const textArray = Array.from(text);

    // 用codePointAt读取所有字符的十进制Unicode码
    // 用toString将十进制Unicode码转化成二进制（除了二进制，我们也可以使用更大的进制来缩短加密后的信息长度，以此提升效率）
    const binarify = textArray.map(c => c.codePointAt(0).toString(2));

    // 此时binarify中的值是 ["110001", "110010", "110011", "11111011000000000"]，下一步我们需要将"1"，"0"和分隔符映射到响应的零宽度字符上去

    // 我们用零宽度连字符来代表1，零宽度断字符来代表0，零宽度空格符来代表分隔符
    // 下面的''看上去像是空字符串，但其实都是长度为1，包含零宽度字符的字符串
    const encoded = binarify.map(c => Array.from(c).map(b => b === '1' ? '‍' : '‌').join('')).join('​');
    console.log("'"+encoded+"'");
    $.ajax({

        type: "get",

        url: "index.php",

        data: {encoded:encoded},

        dataType: "json",

        success: function(data){

            console.log("'"+data.encoded+"'");



            const encoed=encoded;
            //const encoded = "‍‍‌‌‌‍​‍‍‌‌‍‌​‍‍‌‌‍‍​‍‍‍‌‍‌​‍‍‌‌‍‍‍​‍‍‍‌‌‍‌​‍‍‌‍‌‌‍​‍‍‌‍‍‍‌​‍‍‌‍‍‍‌​‍‍‌‍‌‌‍​‍‍‌‍‍‍‌​‍‍‌‌‍‍‍​‍‍‍‌‍‌";


            // 接着上面的encoded
            // 用分隔符（零宽度空格符）提取加密文本中的字符
            const split = encoded.split('​');
            var v='​';
            // 将文本转回成二进制数组
            const binary = split.map(c => Array.from(c).map(z => z === '‍' ? '1' : '0').join(''));

            // 此时binary中的值再次回到开始的 ["110001", "110010", "110011", "11111011000000000"]

            // 最后一部只需要将二进制文本转回十进制，再使用 String.fromCodePoint 就可以得到原文本了
            const decoded = binary.map(b => String.fromCodePoint(parseInt(b, 2))).join('');

            // 此时decoded中的值即是 "123:grinning:"

            console.log(""+decoded+"");

        }

    });


    /*
     // 接着上面的encoded
     // 用分隔符（零宽度空格符）提取加密文本中的字符
     const split = encoded.split('​');
     var v='​';
     // 将文本转回成二进制数组
     const binary = split.map(c => Array.from(c).map(z => z === '‍' ? '1' : '0').join(''));

     // 此时binary中的值再次回到开始的 ["110001", "110010", "110011", "11111011000000000"]

     // 最后一部只需要将二进制文本转回十进制，再使用 String.fromCodePoint 就可以得到原文本了
     const decoded = binary.map(b => String.fromCodePoint(parseInt(b, 2))).join('');

     // 此时decoded中的值即是 "123:grinning:"

     console.log("--"+decoded+"--");
     */
</script>
-->
